<template>
  <div class="app-container">
    <el-steps :active="1" finish-status="success" align-center>
      <el-step title="申请请假" />
      <el-step title="申请审批" />
      <el-step title="请假审批" />
    </el-steps>

    <!-- 基本信息卡片 -->
    <el-card class="mt-4">
      <template #header><h3>基本信息</h3></template>
      <el-form
        ref="basicFormRef"
        :model="basicForm"
        label-width="100px"
        class="mt-2"
      >
        <el-form-item label="老人姓名" prop="elderName" required>
          <el-input
            v-model="basicForm.elderName"
            placeholder="请选择老人"
            readonly
            class="cursor-pointer"
            @click="openElderDialog"
          >
            <template #append>
              <el-icon class="cursor-pointer" @click="openElderDialog">
                <Select />
              </el-icon>
            </template>
          </el-input>
          <!-- 新增：老人请假状态提示 -->
          <div v-if="leaveCheckLoading" class="el-form-item__tip">
            <el-icon class="is-loading"><Loading /></el-icon>
            <span style="margin-left: 5px; color: #909399"
              >检查老人请假状态中...</span
            >
          </div>
          <div v-else-if="elderOnLeave" class="el-form-item__error">
            <el-icon><Warning /></el-icon>
            <span style="margin-left: 5px"
              >该老人当前处于请假中，无法重复提交请假申请</span
            >
          </div>
        </el-form-item>
        <el-form-item label="老人身份证号" prop="idCard" required>
          <el-input
            v-model="basicForm.idCard"
            placeholder="自动填充"
            readonly
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone" required>
          <el-input v-model="basicForm.phone" placeholder="自动填充" readonly />
        </el-form-item>
        <el-form-item label="护理等级" prop="nursingLevel" required>
          <el-input
            v-model="basicForm.nursingLevel"
            placeholder="自动填充"
            readonly
          />
        </el-form-item>
        <el-form-item label="入住床位" prop="bed" required>
          <el-input v-model="basicForm.bed" placeholder="自动填充" readonly />
        </el-form-item>
        <el-form-item label="护理员" prop="nurse" required>
          <el-input v-model="basicForm.nurse" placeholder="自动填充" readonly />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 老人选择弹窗：核心修改区（数据渲染+空状态+加载） -->
    <el-dialog
      v-model="elderDialogVisible"
      title="选择老人"
      width="800px"
      destroy-on-close
    >
      <!-- 1. 加载状态：避免数据加载中显示空白 -->
      <div v-loading="loading" class="loading-container">
        <!-- 2. 无数据状态：优先判断，覆盖表格 -->
        <div v-if="!loading && elderTableData.length === 0" class="empty-state">
          <el-empty description="暂无老人数据，请检查筛选条件或添加老人信息" />
        </div>

        <!-- 3. 表格数据：仅在有数据时显示 -->
        <el-table
          v-else
          :data="elderTableData"
          border
          row-key="elderlyId"
          @row-click="handleSelectElder"
          highlight-current-row
          stripe
          :locale="{ emptyText: '当前页暂无老人数据' }"
        >
          <el-table-column label="老人标识" align="center" width="200">
            <template #default="scope">{{
              `${scope.row.elderlyId}---${scope.row.elderlyName}`
            }}</template>
          </el-table-column>
          <el-table-column
            label="身份证号"
            prop="elderlyIdCard"
            align="center"
            width="200"
          />
          <el-table-column
            label="联系方式"
            prop="elderlyPhone"
            align="center"
            width="150"
          />
          <el-table-column
            label="护理等级"
            prop="nursingLevel"
            align="center"
            width="150"
          />
          <el-table-column
            label="护理员"
            prop="caregiverName"
            align="center"
            width="150"
          />
          <el-table-column label="入住床位" align="center" width="200">
            <template #default="scope">
              {{
                `${scope.row.floorName || ""}楼${scope.row.roomNo || ""}房间${
                  scope.row.bedNo || ""
                }床位`
              }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页：仅在有数据/加载完成时显示 -->
        <el-pagination
          v-if="!loading && total > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          class="mt-3"
        />
      </div>
    </el-dialog>

    <!-- 申请信息卡片（保持不变） -->
    <el-card class="mt-4">
      <template #header><h3>申请信息</h3></template>
      <el-form
        ref="applyFormRef"
        :model="applyForm"
        label-width="100px"
        class="mt-2"
      >
        <el-form-item label="陪同人" prop="accompanyType" required>
          <el-radio-group v-model="applyForm.accompanyType">
            <el-radio label="家属">家属</el-radio>
            <el-radio label="护理人员">护理人员</el-radio>
            <el-radio label="其他">其他</el-radio>
            <el-radio label="无">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="陪同人姓名"
          prop="accompanyName"
          required
          v-if="applyForm.accompanyType !== '无'"
        >
          <el-input
            v-model="applyForm.accompanyName"
            placeholder="请输入"
            maxlength="10"
          />
        </el-form-item>
        <el-form-item
          label="陪同人联系方式"
          prop="accompanyPhone"
          required
          v-if="applyForm.accompanyType !== '无'"
        >
          <el-input
            v-model="applyForm.accompanyPhone"
            placeholder="请输入"
            maxlength="11"
          />
        </el-form-item>
        <el-form-item label="请假周期" prop="leavePeriod" required>
          <el-date-picker
            v-model="applyForm.leavePeriod"
            type="datetimerange"
            range-separator="—"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="请选择请假周期"
            value-format="YYYY-MM-DD HH:mm:ss"
            :disabled-date="disabledPastDate"
          />
        </el-form-item>
        <el-form-item label="请假天数" prop="leaveDays">
          <el-input
            v-model="applyForm.leaveDays"
            placeholder="自动计算"
            disabled
          />
        </el-form-item>
        <el-form-item label="请假原因" prop="leaveReason" required>
          <el-input
            v-model="applyForm.leaveReason"
            type="textarea"
            placeholder="请输入请假原因"
            maxlength="200"
          />
        </el-form-item>
      </el-form>
      <div class="text-right mt-4">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { Select } from "@element-plus/icons-vue";
import { Loading, Warning } from "@element-plus/icons-vue"; // 新增：引入加载图标和警告图标
import { ElEmpty, ElMessage } from "element-plus"; // 导入空状态和提示组件
import {
  selectElderlySelectList,
  checkElderlyLeaveStatus,
  listByElderlyAndStatus,
} from "@/api/le/elderly";
import {
  listRequest,
  addRequest,
  getRequest,
  updateRequest,
  delRequest,
} from "@/api/le/request";
import { getUser } from "@/api/system/user";
// 在现有的响应式数据后面添加
const elderOnLeave = ref(false); // 标记老人是否处于请假中
const leaveCheckLoading = ref(false); // 检查状态的加载状态
// 新增：禁用今天之前的日期（包含今天的0点前时间）
const disabledPastDate = (date) => {
  // 1. 获取今天的日期，并清除时间部分（时/分/秒/毫秒设为0）
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 确保比较的是“日期”而非“时间”

  // 2. 若当前点击的日期 < 今天（0点），则禁用该日期
  return date < today;
};
// 新增：存储护理员信息
const nurseInfo = ref(null);
// 页面初始化时获取护理员信息
onMounted(async () => {
  try {
    // 获取userId为104的护理员信息
    const res = await getUser(104);
    console.log("获取护理员信息:", res);
    if (res.code === 200 && res.data) {
      nurseInfo.value = res.data;
    } else {
      ElMessage.warning("未查询到护理员信息");
    }
  } catch (err) {
    console.error("获取护理员信息失败：", err);
  }
});
const router = useRouter();
const basicFormRef = ref(null);
const applyFormRef = ref(null); // 新增：声明申请表单引用
// 存储登录用户信息
// 1. 新增：原生日期格式化函数（替代dayjs，生成yyyy-MM-dd HH:mm:ss格式）
const formatDate = (date) => {
  // 处理年、月、日（月份从0开始，需+1；单数补0）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 补0，如1→01
  const day = String(date.getDate()).padStart(2, "0");
  // 处理时、分、秒（单数补0）
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const second = String(date.getSeconds()).padStart(2, "0");
  // 拼接成目标格式
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
// 1. 基础表单数据（与DTO字段严格匹配）
const basicForm = reactive({
  elderlyId: "", // 新增：存储老人ID（关键）
  elderName: "",
  idCard: "",
  phone: "",
  nursingLevel: "",
  bed: "",
  nurse: "",
});

// 2. 申请表单数据
const applyForm = reactive({
  accompanyType: "无",
  accompanyName: "",
  accompanyPhone: "",
  leavePeriod: [],
  leaveDays: "",
  leaveReason: "",
});

// 3. 弹窗核心数据：新增loading状态，确保响应式
const elderDialogVisible = ref(false);
const elderTableData = ref([]); // 初始空数组，避免undefined
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const loading = ref(false); // 加载状态：解决"数据加载中显示空白"问题

// 4. 请假天数计算（保持不变）
watch(
  () => applyForm.leavePeriod,
  (val) => {
    if (val && val.length === 2) {
      const start = new Date(val[0]);
      const end = new Date(val[1]);
      const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
      applyForm.leaveDays = days;
    }
  }
);

// 5. 打开弹窗：重置页码+加载数据
const openElderDialog = () => {
  elderDialogVisible.value = true;
  pageNum.value = 1; // 每次打开弹窗从第一页开始
  getElderList();
};

// 6. 核心修复：接口数据处理（匹配若依后端响应结构）
const getElderList = async () => {
  try {
    loading.value = true; // 开始加载：显示loading动画
    const res = await selectElderlySelectList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });

    // 关键修复：若依后端分页默认返回 {total: 总条数, rows: 列表数据}，而非data/count
    const responseData = res || {};
    elderTableData.value = responseData.rows || []; // 赋值列表数据，空数组兜底
    total.value = responseData.total || 0; // 赋值总条数，0兜底

    // 调试：确认后端返回结构（可删除）
    console.log("接口响应结构：", responseData);
    console.log("当前页数据：", elderTableData.value);
  } catch (err) {
    console.error("获取老人列表失败：", err);
    ElMessage.error("加载老人数据失败，请重试");
    elderTableData.value = []; // 异常时置空，触发空状态
    total.value = 0;
  } finally {
    loading.value = false; // 结束加载：隐藏loading动画
  }
};

// 7. 分页事件（保持不变）
const handleSizeChange = (val) => {
  pageSize.value = val;
  pageNum.value = 1;
  getElderList();
};
const handleCurrentChange = (val) => {
  pageNum.value = val;
  getElderList();
};

// 8. 选择老人回显：字段与DTO严格匹配
const handleSelectElder = async (row) => {
  if (!row) return; // 防止空行点击
  // 补充记录老人ID（后端需要的elderlyId）
  basicForm.elderlyId = row.elderlyId || ""; // 假设接口返回的老人ID字段为elderlyId
  basicForm.elderName = row.elderlyName || "";
  basicForm.idCard = row.elderlyIdCard || "";
  basicForm.phone = row.elderlyPhone || "";
  basicForm.nursingLevel = row.nursingLevel || "无护理等级";
  basicForm.bed = `${row.floorName || ""}楼${row.roomNo || ""}房间${
    row.bedNo || ""
  }床位`;
  basicForm.nurse = row.caregiverName || "无护理员";
  elderDialogVisible.value = false;
  // 新增：检查老人请假状态
  await checkElderLeaveStatus();
};
// 新增：检查老人请假状态的函数
const checkElderLeaveStatus = async () => {
  if (!basicForm.elderlyId) return;

  try {
    leaveCheckLoading.value = true;
    const res = await checkElderlyLeaveStatus(basicForm.elderlyId);
    console.log("老人请假状态检查结果:", res);

    // 根据后端返回结果设置状态
    elderOnLeave.value = res.data === true;

    if (elderOnLeave.value) {
      ElMessage.warning("该老人当前处于请假中，无法重复提交请假申请");
    }
  } catch (err) {
    console.error("检查老人请假状态失败:", err);
    elderOnLeave.value = false; // 检查失败时默认不显示提示
  } finally {
    leaveCheckLoading.value = false;
  }
};
// 2. 提交表单逻辑（日期处理改用原生函数，其他逻辑不变）
const submit = async () => {
  try {
    // 表单校验、老人ID校验、请假周期校验均保持不变...
    await Promise.all([
      basicFormRef.value.validate(),
      applyFormRef.value.validate(),
    ]);
    if (!basicForm.elderlyId) {
      ElMessage.error("请选择老人信息");
      return;
    }
    const [leaveStartTime, expectedEndTime] = applyForm.leavePeriod || [];
    if (!leaveStartTime || !expectedEndTime) {
      ElMessage.error("请选择完整的请假周期");
      return;
    }

    // 陪同人数据处理（保持不变，"无"时设为"0"）
    let companionName = applyForm.accompanyName;
    let companionPhone = applyForm.accompanyPhone;
    if (applyForm.accompanyType === "无") {
      companionName = "0";
      companionPhone = "0";
    }

    // 3. 关键调整：用原生函数生成createTime（替代dayjs）
    const currentTime = formatDate(new Date());

    // 构造提交数据（无creator字段，createTime用原生格式化结果）
    const submitData = {
      elderlyId: basicForm.elderlyId,
      companionType: applyForm.accompanyType,
      companionName: companionName,
      companionPhone: companionPhone,
      leaveStartTime: leaveStartTime, // 日期选择器已生成yyyy-MM-dd HH:mm:ss格式，无需处理
      expectedEndTime: expectedEndTime, // 同上
      expectedLeaveDays: applyForm.leaveDays,
      leaveReason: applyForm.leaveReason,
      createTime: currentTime, // 原生格式化后的时间
      leaveStatus: "请假中",
      businessId: generateBusinessId(), // 单据号生成也改用原生函数
      nurseNickName: nurseInfo.value?.nickName, // 优先使用接口获取的昵称
    };

    // 调用接口提交（保持不变）
    const res = await addRequest(submitData);
    console.log("提交数据：", submitData);
    console.log("接口响应：", res);

    if (res.code === 200) {
      ElMessage.success("请假申请提交成功");
      router.push({
        path: "/leaveApplication/pending",
        query: {
          elderlyId: submitData.elderlyId, // 老人ID
          billNo: submitData.businessId, // 单据号
          // 传递基础信息表单（需序列化）
          basicForm: JSON.stringify(basicForm),
          // 传递申请信息表单（需序列化）
          applyForm: JSON.stringify(applyForm),
          // 传递提交的完整数据（包含时间等）
          submitData: JSON.stringify(submitData),
        },
        /*  path: "/leaveApplication/secondStep",
        query: {
          elderlyId: submitData.elderlyId, // 老人ID
          billNo: submitData.businessId, // 单据号
          // 传递基础信息表单（需序列化）
          basicForm: JSON.stringify(basicForm),
          // 传递申请信息表单（需序列化）
          applyForm: JSON.stringify(applyForm),
          // 传递提交的完整数据（包含时间等）
          submitData: JSON.stringify(submitData),
        }, */
      });
    } else {
      ElMessage.error(res.msg || "提交失败，请重试");
    }
  } catch (err) {
    /* console.error("提交失败：", err);
    ElMessage.error("提交过程出错，请检查网络或联系管理员"); */
  }
};
// 4. 纯随机单据号生成函数（无时间拼接，格式：LEAVE_+12位随机字符）
// 原函数删除，替换为以下代码：生成8位纯数字单据号（范围：10000000 ~ 99999999）
const generateBusinessId = () => {
  // 1. 生成 0 ~ 89999999 之间的随机整数（89999999 = 99999999 - 10000000）
  const randomNum = Math.floor(Math.random() * 90000000);
  // 2. 加上 10000000，确保结果是 8 位数字（最小10000000，最大99999999）
  const eightDigitNum = randomNum + 10000000;
  // 3. 直接返回数字类型（适配后端 Long 类型，无需转字符串）
  return eightDigitNum;
};
const reset = () => {
  basicFormRef.value?.resetFields();
  applyFormRef.value?.resetFields();
  elderTableData.value = [];
  pageNum.value = 1;
  applyForm.leaveDays = "";
  // 新增：重置请假状态
  elderOnLeave.value = false;
  leaveCheckLoading.value = false;
};
// 页面初始化时调用
</script>

<style scoped>
/* 空状态样式优化 */
.empty-state {
  text-align: center;
  padding: 40px 0;
}
/* loading容器样式 */
.loading-container {
  min-height: 300px;
}
/* 提示信息样式 */
.el-form-item__tip {
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  color: #909399;
}

.el-form-item__error {
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  color: #f56c6c;
}
</style>
